<template>
    <div class="w-[750px] bg-gray-100 p-4 rounded-lg">
      <!-- 头部信息 -->
      <div class="flex justify-between items-center mb-4">
        <div>
          <p class="text-sm text-gray-600">商家:老六婚恋</p>
          <p class="text-xs text-gray-500">商家ID: 029243048</p>
        </div>
        <button class="bg-transparent border-none focus:outline-none">
          <i class="fas fa-cog text-gray-500"></i>
        </button>
      </div>
  
      <div class="flex items-center mb-4">
        <img src="@/assets/user-avatar.png" alt="用户头像" class="w-[80px] h-[80px] rounded-full mr-4">
        <div>
          <p class="text-xl font-bold text-gray-800">顺阳</p>
          <p class="text-sm text-gray-500">个人ID: 384602408</p>
        </div>
        <van-button type="danger" size="small" class="ml-auto bg-pink-500 text-black px-4 py-2 rounded-full">个人资料 ></van-button>
      </div>
  
      <!-- 功能列表 -->
      <van-cell-group class="space-y-2">
        <van-cell title="会员套餐" is-link icon="vip-card-o" class="bg-white p-4 rounded-lg flex items-center justify-between">
          <template #icon>
            <i class="mr-2 text-gray-500" style="font-size: 20px;">&#xe61b;</i> <!-- 替换为实际的图标 -->
          </template>
          <template #right-icon>
            <i class="text-gray-500" style="font-size: 20px;">&#xe60c;</i> <!-- 替换为实际的图标 -->
          </template>
        </van-cell>
        <van-cell title="系统通知" is-link icon="chat-o" badge="1" class="bg-white p-4 rounded-lg flex items-center justify-between">
          <template #icon>
            <i class="mr-2 text-gray-500" style="font-size: 20px;">&#xe60d;</i> <!-- 替换为实际的图标 -->
          </template>
          <template #right-icon>
            <i class="text-gray-500" style="font-size: 20px;">&#xe60c;</i> <!-- 替换为实际的图标 -->
          </template>
        </van-cell>
        <van-cell title="客服消息" is-link icon="service-o" class="bg-white p-4 rounded-lg flex items-center justify-between">
          <template #icon>
            <i class="mr-2 text-gray-500" style="font-size: 20px;">&#xe60e;</i> <!-- 替换为实际的图标 -->
          </template>
          <template #right-icon>
            <i class="text-gray-500" style="font-size: 20px;">&#xe60c;</i> <!-- 替换为实际的图标 -->
          </template>
        </van-cell>
        <van-cell title="账号设置" is-link icon="setting-o" class="bg-white p-4 rounded-lg flex items-center justify-between">
          <template #icon>
            <i class="mr-2 text-gray-500" style="font-size: 20px;">&#xe60f;</i> <!-- 替换为实际的图标 -->
          </template>
          <template #right-icon>
            <i class="text-gray-500" style="font-size: 20px;">&#xe60c;</i> <!-- 替换为实际的图标 -->
          </template>
        </van-cell>
      </van-cell-group>
  
      <!-- 退出登录按钮 -->
      <van-button type="default" block class="mt-4 bg-white text-red-500">退出登录</van-button>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue';
  import { Cell, CellGroup, Button } from 'vant';
  
  export default defineComponent({
    components: {
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Button.name]: Button,
    },
  });

  </script>
  
  <style scoped>
  /* 使用Tailwind CSS进行样式调整 */
  .van-cell-group {
    .van-cell {
      background-color: white;
      padding: 1rem;
      border-radius: 0.5rem;
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    .van-cell__title {
      font-size: 1rem;
      color: #333;
    }
  
    .van-cell__value {
      color: #999;
    }
  
    .van-cell__icon {
      margin-right: 0.5rem;
      color: #999;
    }
  
    .van-cell__right-icon {
      color: #999;
    }
  }



  /*退出登录的按钮样式*/ 
  .van-button--default {
  color: #ff69b4; /* 粉色文字 */
  border-color: #e8e8e8; /* 浅灰色边框 */
}

.van-button--block {
  border-radius: 10px; /* 圆角 */
}



  </style>